<template>
    <div id="index">
      <div>
        <div v-if="loading">Loading...</div>
        <div v-else class="host-body">
          <!-- 第一行 -->
          <div class="d-flex jc-between px-2">
            <div class="d-flex" style="width: 40%">
              <div
                class="react-right ml-4"
                style="width: 6.25rem; text-align: left;background-color: #0f1325;"
              >
                <span class="react-before"></span>
                <span class="text">数据分析1</span>
              </div>
              <div class="react-right ml-3" style="background-color: #0f1325;">
                <span class="text colorBlue">数据分析2</span>
              </div>
            </div>
            <div style="width: 60%" class="d-flex">
              <div class="react-left bg-color-blue mr-3">
                <span class="text fw-b">平台大数据展示</span>
              </div>
              <div
                class="react-left mr-4"
                style="width: 7.75rem; background-color: #0f1325; text-align: right;"
              >
                <span class="react-after"></span>
                <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
              </div>
            </div>
          </div>
  
          <div class="body-box">
            <!-- 第二行 -->
            <div class="content-box">
              <div>
                <div>
                  <!-- 任务通过率 -->
                  <taskRate />
                </div>
              </div>
              <div>
                <div>
                  <chinaMap />
                </div>
              </div>
              <!-- 中间 -->
              <div>
                <center />
              </div>
              <!-- 中间 -->
              <div>
                <centerRight2 />
              </div>
              <div>
                <div>
                  <centerRight1 />
                </div>
              </div>
            </div>
  
            <!-- 第三行数据 -->
            <div class="bototm-box">
              <div>
                <!-- <bottomLeft /> -->
                <LineChart />
              </div>
              <div>
                <bottomRight />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- <div class="dashboard-editor-container">
        <el-row :gutter="32">
          柱状图
          <el-col :xs="24" :sm="24" :lg="8" style="width: 30%;">
            <el-row>
              <div class="chart-wrapper">
                <bar-chart />
              </div>
            </el-row>
            饼图
            <el-row>
              <div class="chart-wrapper">
                <pie-chart />
              </div>
            </el-row>
            
          </el-col>
          中国地图
          <el-col :xs="24" :sm="24" :lg="8" style="width: 40%;">
            <div class="chart-wrapper">
              <china-map />
            </div>
          </el-col>
          
          <el-col :xs="24" :sm="24" :lg="8" style="width: 30%;">
            柱状图
            <el-row>
              <div class="chart-wrapper">
                <bar-chart />
              </div>
            </el-row>
            饼图
            <el-row>
              <div class="chart-wrapper">
                <pie-chart />
              </div>
            </el-row>
            
          </el-col>
          
        </el-row>
        <el-row>
          <el-col :span="5" style="width: 50%;">
              <panel-group @handleSetLineChartData="handleSetLineChartData" />
              <el-row style="background:#fff;">
                <line-chart :chart-data="lineChartData" />
              </el-row>
          </el-col>
          表格 
          <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
            <notice-table />
          </el-col>
        </el-row>
       
      </div> -->
  </template>
    
  <script>
    import PanelGroup from './components/PanelGroup'
    import LineChart from './components/LineChart'
    // import PieChart from './components/PieChart'
    // import BarChart from './components/BarChart'
    // import NoticeTable from './components/NoticeTable'
    // import ChinaMap from '@/views/dashboard/admin/components/ChinaMap'
    import taskRate from "./components/centerLeft1.vue";
    // import fujianMap from "./components/centerLeft2.vue";
    import chinaMap from "./components/ChinaMap.vue"
    import centerRight1 from "./components/centerRight1.vue";
    import centerRight2 from "./components/centerRight2.vue";
    import center from "./components/center.vue";
    // import bottomLeft from "./components/bottomLeft.vue";
    import bottomRight from "./components/bottomRight.vue";
    import { formatTime } from '@/utils'
    
    const lineChartData = {
      register: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
      },
      task: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
      },
      income: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
      },
      exchange: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
      }
    }
    
    export default {
      name: 'DashboardAdmin',
      components: {
        // PieChart,
        // ChinaMap,
        // BarChart,
        PanelGroup,
        LineChart,
        // NoticeTable,
        taskRate,
        // fujianMap
        chinaMap,
        centerRight1,
        centerRight2,
        center,
        // bottomLeft,
        bottomRight
      },
      data() {
        return {
          lineChartData: lineChartData.newVisitis,
          loading:true,
          dateDay:null,
          dateYear:null,
          dateWeek:null,
          weekday:["周日","周一","周二","周三","周四","周五","周六"],
        }
      },
      mounted(){
        this.timeFn();
        this.cancelLoading();
      },
      methods: {
        handleSetLineChartData(type) {
          this.lineChartData = lineChartData[type]
        },
        timeFn(){
          setInterval(()=>{
            this.dateDay=formatTime(new Date(),'HH:mm:ss');
            this.dateYear=formatTime(new Date(),'yyyy-MM-dd');
            this.dateWeek=this.weekday[new Date().getDay()];
          },1000)
        },
        cancelLoading(){
          setTimeout(()=>{
            this.loading=false;
          },500);
        }
      }
    }
  </script>
  
  <style lang="scss" scoped>
  @import "../../../styles/dashboard"
    
    // .dashboard-editor-container {
    //   padding: 32px;
    //   background-color: rgb(240, 242, 245);
    //   position: relative;
    
    //   .chart-wrapper {
    //     background: #fff;
    //     padding: 16px 16px 0;
    //     margin-bottom: 32px;
    //   }
    // }
    
    // @media (max-width:1024px) {
    //   .chart-wrapper {
    //     padding: 8px;
    //   }
    // }
  </style> 